<template>
    <div style="height: 100vh">
        <HeaderTitle title="背景不顺眼，Are you kidding me？"
                     style="width: 9.5rem;margin: 1.5rem auto 1rem"></HeaderTitle>
        <div class="theme-img-box">
            <n-carousel effect="card" dot-type="line" draggable>
                <n-carousel-item v-for="item in nameList" :key="item.index" :style="{ width: '50%'}">
                    <div class="img-box">
                        <button class="theme-header but">{{ item.label }}</button>
                        <n-carousel effect="fade" v-model:ref="item.refCarousel" show-arrow
                                    :default-index="imgList[item.index]">
                            <div class="bg-box" v-for="item in imgBgList" :key="item.index">
                                <img class="carousel-img"
                                     :src="item.label" alt="bg">
                                <div class="prompt">
                                    {{ item.prompt.toString().slice(0, 7) }}
                                    <br>
                                    {{ item.prompt.toString().slice(8, 16) }}
                                </div>
                            </div>
                        </n-carousel>
                    </div>
                </n-carousel-item>
            </n-carousel>
        </div>
        <div class="but-box">
            <button class="comm-submit mt-10" @click="confirmImg">
                <span class="edge"></span>
                <span class="front">提 交</span>
            </button>
            <button class="comm-submit mt-10" @click="resetImg">
                <span class="edge"></span>
                <span class="front">重 置</span>
            </button>
        </div>
    </div>
</template>

<script setup lang="ts">
import useStore from "@/store";

const homeCarousel = ref(null);
const recordCarousel = ref(null);
const agreeCarousel = ref(null);
const studyCarousel = ref(null);
const releaseCarousel = ref(null);
const setCarousel = ref(null);
const shareCarousel = ref(null);
const userCarousel = ref(null);

const {app} = useStore();
const imgList = app.backgroundImgList;
onActivated(() => {
    app.setBackgroundImg(app.backgroundImgList[5])
})

const data = reactive({
    nameList: [
        {
            index: 0,
            label: "首页",
            refCarousel: "homeCarousel"
        },
        {
            index: 1,
            label: "记录",
            refCarousel: "recordCarousel"
        },
        {
            index: 2,
            label: "约起",
            refCarousel: "agreeCarousel"
        },
        {
            index: 3,
            label: "学习",
            refCarousel: "studyCarousel"
        },
        {
            index: 4,
            label: "发布",
            refCarousel: "releaseCarousel"
        },
        {
            index: 5,
            label: "设置",
            refCarousel: "setCarousel"
        },
        {
            index: 6,
            label: "分享",
            refCarousel: "shareCarousel"
        },
        {
            index: 7,
            label: "个人",
            refCarousel: "userCarousel"
        },
    ],
    imgBgList: [
        {
            index: 1,
            prompt: "虚无飘渺的深蓝,诞生于宇宙之寂静",
            label: "/src/assets/images/bg/bg1l.jpg",
        },
        {
            index: 2,
            prompt: "高尚治愈的繁星,赐予我生命之奇迹",
            label: "/src/assets/images/bg/bg2l.jpg",
        },
        {
            index: 3,
            prompt: "神秘无垠的智海,领略于茫茫之学海",
            label: "/src/assets/images/bg/bg3l.jpg",
        },
        {
            index: 4,
            prompt: "磅礴有力的紫兰,抨击我羸弱之心灵",
            label: "/src/assets/images/bg/bg4l.jpg",
        },
        {
            index: 5,
            prompt: "点滴深邃的琼瑶,脯孕凡世间之万物",
            label: "/src/assets/images/bg/bg5l.jpg",
        },
        {
            index: 6,
            prompt: "盛情万茂的碧涛,凝望我眸间之淡彩",
            label: "/src/assets/images/bg/bg6l.jpg",
        },
        {
            index: 7,
            prompt: "浩宏壮丽的天穹,轻抚于大千之焦灼",
            label: "/src/assets/images/bg/bg7l.jpg",
        },
    ]
})

const {nameList, imgBgList} = toRefs(data);

const confirmImg = () => {
    let homeI = homeCarousel.value?.getCurrentIndex();
    let recordI = recordCarousel.value?.getCurrentIndex();
    let agreeI = agreeCarousel.value?.getCurrentIndex();
    let studyI = studyCarousel.value?.getCurrentIndex();
    let releaseI = releaseCarousel.value?.getCurrentIndex();
    let setI = setCarousel.value?.getCurrentIndex();
    let shareI = shareCarousel.value?.getCurrentIndex();
    let userI = userCarousel.value?.getCurrentIndex();
    app.backgroundImgList = [homeI, recordI, agreeI, studyI, releaseI, setI, shareI, userI];
    app.isThemeBg = false;
    window.$message?.success("图片背景设好啦!");
    location.reload();
}

const resetImg = () => {
    window.$dialog?.warning({
        title: '警告',
        content: '你确定？',
        positiveText: '确定',
        negativeText: '不确定',
        onPositiveClick: () => {
            app.backgroundImgList = [0, 1, 2, 3, 4, 5, 6];
            app.isThemeBg = false;
            app.themeName = "default";
            document.documentElement.setAttribute('theme-el', "default");
            window.$message?.success('重置成功啦!');
            location.reload();
        },
        onNegativeClick: () => {
            window.$message?.success('我要保守')
        }
    })
}

</script>

<style scoped>
.theme-img-box {
    width: 90%;
    height: 8.5rem;
    margin: 0.5rem auto 0;

    .img-box {
        height: 7.8rem;
        border-radius: 0.2rem;
        backdrop-filter: blur(0.25rem) saturate(150%);
        transition: all 0.2s ease-in-out 0s;

        .theme-header {
            position: absolute;
            top: 0.4rem;
            right: 0.4rem;
            z-index: 1;
        }

        .bg-box {
            position: relative;
            width: 100%;
            height: 100%;

            &:hover {
                .prompt {
                    transform: none;
                }
            }

            .carousel-img {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-position: center !important;
                border-radius: 0.1rem;
            }

            .prompt {
                position: absolute;
                top: 0;
                left: 0;
                width: 5rem;
                box-shadow: 0 0 0.1rem 0.05rem var(--box-shadow-c);
                backdrop-filter: blur(0.25rem) saturate(150%);
                text-align: center;
                margin-top: 3rem;
                border-radius: 0 0.2rem 0.2rem 0;
                font-weight: bold;
                font-size: 0.5rem;
                color: var(--main-1);
                transform: translateX(-110%);
                transition: 0.4s ease-in-out 0s;
            }
        }
    }
}

@media (max-width: 36rem) {
    .theme-img-box {
        height: 6rem;

        .img-box {
            height: 5.5rem;
        }
    }

    .prompt {
        font-size: 0.2rem !important;
        margin-top: 2rem !important;
    }
}

.but-box {
    display: flex;
    justify-content: center;
    gap: 0.2rem;
}

</style>